import axios from "axios";
import React,{useEffect, useState} from "react";

  interface item{
    id:number;
    name:string;
    author:string;
    content:string;
  }

function Box (){

    const [ boxer,setBoxer]=useState <item[]>([]);
    const [ boxeeer,setBoxeeer]=useState <item|null>(null);

    useEffect(()=>{ 
        try{
            axios.get("http://localhost:3004/books")
            .then(response=>setBoxer(response.data))
        }
        catch(error){
            console.error(error)
        }
    },[])

    const dianji =(boxeeeer:item)=>{
        setBoxeeer(boxeeeer)
    }

    return(
    <div>
        < div>
          <h1>书籍列表</h1>
          <ul>
            {boxer.map(boxeer=>(
                <li key={boxeer.id} onClick={()=>dianji(boxeer)}>
                   {boxeer.id} 蛋{boxeer.name}
                </li>
            ))}
          </ul>
       </div>
       <div>
            <h1>书籍详情</h1>
            {/* boxeeer ? : */}
            {boxeeer ?(
                <div>
                    <h1>{boxeeer.name}</h1>
                     <p>作者:{boxeeer.author}</p>  
                     <p>{boxeeer.content}</p>
                </div>
            ):(
                <h1>无书籍信息</h1>
            )}         
       </div>
    </div>      
    )
}

export default Box;
